<template>
  <div class="box">
      <top  col="栏目管理" />

      <div class="activate">
          <div class="act">点击删除以下栏目</div>
          <div class="one">
            <span v-for="(item,index) in acrivate" :key="index" @click="deleti(index)">{{item.name}}</span>
          </div>
      </div>
      <div class="deactivate">
        <div class="act">点击添加栏目</div>
          <div class="two">
              <span v-for="(item,index) in deacrivate" :key="index" @click="add(index)">{{item.name}}</span>
          </div>
      </div>
  </div>
</template>

<script>
import top from '@/components/module/top'
export default { 
    components:{
        top,
    },
    data(){
        return{
            acrivate:[],
            deacrivate:[]
        }
    },
    created(){

        if(localStorage.getItem('acrivate')){
            this.acrivate = JSON.parse(localStorage.getItem('acrivate'))
            this.deacrivate = JSON.parse(localStorage.getItem('deacrivate'))
        }else{
            this.$axios({
                url:'/category',
            }).then(res=>{
                console.log(res);
                this.acrivate = res.data.data
            })
        }
    },
    watch:{
        acrivate(){  //监听栏目储存是执行储存函数
            localStorage.setItem('acrivate',JSON.stringify(this.acrivate))
        },
        deacrivate(){
            localStorage.setItem('deacrivate',JSON.stringify(this.deacrivate))
        }
    },
    methods:{
        deleti(index){  //点击删除栏目
            console.log('点击添加的索引'+index);
            this.deacrivate.unshift(this.acrivate[index])
            this.acrivate.splice(index,1)
        },
        add(index){  //点击添加栏目
            console.log("当前点击添加的索引"+ index);
            this.acrivate.unshift(this.deacrivate[index])
            this.deacrivate.splice(index,1)
        }
    }
}
</script>

<style lang="less" scoped>
.box{
    .activate,.deactivate{
        margin: 20/360*100vw;
    }
    .activate,.deactivate{
        .act{
            color: #afafaf;
        }
        .one,.two{
            display: flex;
            flex-wrap: wrap;
            span{
                padding: 8/360*100vw 12/360*100vw;
                border: solid 1px #dddddd;
                margin: 6/360*100vw;
            }
        }
    }
}
</style>